
<style>
{#Permet de reduire la taille et l'espace du texte du dropdown Taxo Sample#}
#select2-sampleid-results li {font-size: 12px; padding: 3px;}
#TabB .select2-selection__rendered {font-size: 12px; }
</style>

{# ------- Sample ------------#}
<div class="filter ">
	<div class="form-group-sm">
		<label class="title">样品</label>
    {% if data.inexplore==True %}
		<span title="仅在选定了某个项目时可用" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-info-sign"></span>
    {% endif %}
		<a class="pull-right label label-default" style="padding: 1px 3px 3px 3px; margin-top: 5px;font-size: 90%;" href=# onclick='ClearSamples();return false;'>清除</a>
		<a class="pull-right label label-info" style="padding: 1px 3px 3px 3px; margin-top: 5px;margin-right:5px;font-size: 90%;" href=# onclick='AdvancedSamples();return false;'>高级设置</a>
		<select class="form-control" id="sampleid" name="sampleid" style="width: 100%" multiple autocomplete="off"> {{ data.sample_for_select|safe }}</select>
	</div>
</div>
{# ------- Depth ------------#}
<div class="filter ">
	<div class="form-group-sm">
		<label class="title">深度</label>
		<span title="正值。两个值都是必需的。每个对象都有一个最小和最大深度。两个值都必须在要显示对象的选定范围内。" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-info-sign"></span>
		<a class="pull-right label label-default" style="padding: 1px 3px 3px 3px; margin-top: 5px;font-size: 90%;" href=# onclick='ClearDepths();return false;'>清除</a>

		<div class="form-inline">
			<div class="input-group" style="width: 49%" >
				<div class="input-group-addon"><span class="glyphicon glyphicon-triangle-bottom"></span></div>
				<input class="form-control" type="text" id="filt_depthmin" autocomplete="off" value="{{ data.depthmin }}" placeholder="最小 [m]">
			</div>
			<div class="input-group" style="width: 49%">
				<div class="input-group-addon"><span class="glyphicon glyphicon-triangle-top"></span></div>
				<input class="form-control"  type="text" id="filt_depthmax" autocomplete="off" value="{{ data.depthmax }}"  placeholder="最大 [m]">
			</div>
		</div>
	</div>
</div>
{# ------- Position ------------#}
<div class="filter ">
	<div class="form-group-sm">
		<label class="title">位置</label>
		<a class="pull-right label label-default" style="padding: 1px 3px 3px 3px; margin-top: 5px;font-size: 90%;" href=# onclick='ClearCoord();return false;'>清除</a>

		<table>
			<tr>
				<td><input class="form-control" type="text" id="filt_MapOutW" name="filt_MapOutW" value="{{ data.MapW }}" placeholder="西"></td>
				<td><input class="form-control" type="text" id="filt_MapOutN" name="filt_MapOutN"  value="{{ data.MapN }}" placeholder="北">
				<input class="form-control" type="text" id="filt_MapOutS" name="filt_MapOutS" value="{{ data.MapS }}" placeholder="南"></td>
				<td><input class="form-control" type="text" id="filt_MapOutE" name="filt_MapOutE" autocomplete="off" value="{{ data.MapE }}" placeholder="东"></td>
			</tr>
		</table>

		<button type="button" class="btn btn-sm btn-default btn-block active" style="margin-top: 3px;"
                onClick="OpenMap({{ g.Projid }});">打开地图</button>
	</div>
</div>
{# ------- Dates ------------#}
<div class="filter ">
	<div class="form-group-sm">
		<label class="title">日期</label>
		<a class="pull-right label label-default" style="padding: 1px 3px 3px 3px; margin-top: 5px;font-size: 90%;" href=# onclick="ClearDates();return false;">清除</a>
		<input class="form-control" type="text" style="width: 100%" id="filt_fromdate" name="filt_fromdate" value="{{ data.fromdate }}" autocomplete="off" placeholder="起始">
		<input class="form-control" type="text" style="width: 100%" id="filt_todate" name="filt_todate" value="{{ data.todate }}" autocomplete="off" placeholder="终止">
        <select class="form-control" id="month" name="month" style="width: 100%" multiple autocomplete="off">
            {{ data.month_for_select|safe }}
        </select>
	</div>
</div>
{# ------- Times ------------#}
<div class="filter ">
	<div class="form-group-sm">

		<label class="title">时间</label>
		<input type="checkbox" value="Y" id="filt_inverttime" name="filt_inverttime" autocomplete="off" {{ "checked" if data.inverttime=='1' }}> <label for="filt_inverttime">反转</label>
		<a class="pull-right label label-default" style="padding: 1px 3px 3px 3px; margin-top: 5px;font-size: 90%;" href=# onclick='ClearTimes();return false;'>清除</a>
		<form class="form-inline">
			<input class="form-control" type="text" style="width: 49%" id="filt_fromtime" name="filt_fromtime" autocomplete="off" value="{{ data.fromtime }}" placeholder="起始">
			<input class="form-control" type="text" style="width: 49%" id="filt_totime" name="filt_totime" autocomplete="off" value="{{ data.totime }}" placeholder="终止">
		</form>
		<div style="margin: 7px" id="time-slider-range"></div>
        <select class="form-control" id="daytime" name="daytime" style="width: 100%" multiple autocomplete="off">
            {{ data.daytime_for_select|safe }}
        </select>
	</div>
</div>
{# ------- Instrument ------------#}
<div class="filter ">
	<div class="form-group-sm">
		<label class="title">仪器</label> <span class="glyphicon glyphicon-question-sign" onclick="DispInstrumList({{ g.Projid }});" style="cursor: pointer;"></span>
    <a class="pull-right label label-default" style="padding: 1px 3px 3px 3px; margin-top: 5px;font-size: 90%;" href=# onclick='ClearInstrum();return false;'>清除</a>
    <input class="form-control" type="text" id="filt_instrum" name="filt_instrum" value="{{ data.instrum }}" placeholder="仪器">
	</div>
</div>

<script>
function OpenMap(projid) {
  $("#mappanel").remove(); {# Efface l'eventuel objet map affiché dans  explore #}
  $("#PopupDetails .modal-content").html("Loading...");
  $('#PopupDetails .modal-lg').css('width',$(window).width()-40);
  $('#PopupDetails').modal({});
  var url="/search/mappopup/?a=b";
  if(typeof (projid)!="undefined")
    url+="&projid="+projid;
  jqProjid=$("#projid");
  if((typeof (jqProjid.val())!="undefined")&&(jqProjid.val()!=null))
    url+="&projid="+String(jqProjid.val());
  jqTaxo=$("#taxolb"); {# dans explore #}
  if((typeof (jqTaxo.val())!="undefined")&&(jqTaxo.val()!=null))
    url+="&taxoid="+String(jqTaxo.val());
  jqTaxo=$("#taxofilter"); {# dans classif manu #}
  if((typeof (jqTaxo.val())!="undefined")&&(jqTaxo.val()!=null))
    url+="&taxoid="+String(jqTaxo.val());

  if($("#taxochild").prop("checked"))
    url+="&taxochild=1";
  if($("#taxofilterchild").val()=="Y")
    url+="&taxochild=1";
  $("#PopupDetails .modal-content").load(url);
}
function ClearCoord() {
  $("#filt_MapOutN,#filt_MapOutW,#filt_MapOutE,#filt_MapOutS").val("");
}
function ClearDates(){
  $( "#filt_fromdate,#filt_todate" ).val("");
  $( "#month" ).val(null).trigger("change");
}
function ClearDepths(){
  $( "#filt_depthmin,#filt_depthmax" ).val("");
}
function ClearTimes(){
  $("#filt_fromtime,#filt_totime" ).val("");
  $("#filt_inverttime").prop("checked",false);
  $("#daytime").val(null).trigger("change");
}
function ClearInstrum(){
  $("#filt_instrum" ).val("");
}
function ClearSamples(){
  $( "#sampleid" ).val(null).trigger("change");
}

function AdvancedSamples() {
  if($('#projid').val()==null) return;
  $("#PopupDetails .modal-content").html("Loading...");
  $('#PopupDetails .modal-lg').css('width',800);
  $('#PopupDetails').modal({});

  var url="/search/samples?format=P&q=&projid="+$('#projid').val();
  $("#PopupDetails .modal-content").load(url,function () {
    var lst="";
    var sampleid=$('#sampleid');
    lst=$.map(sampleid.find('option:selected'), function (element) { return $(element).text() }).join(', ');
    $('#txtlstsample').val(lst);
    SampleTxtToCB();

  });

}
function UpdateTimeSliderColor(){
  if($("#filt_inverttime").prop("checked")) {
     $("#time-slider-range .ui-slider-range").css('background-color','#fff')
     $("#time-slider-range").css('background-color','#555')
  } else    {
     $("#time-slider-range .ui-slider-range").css('background-color','#555')
     $("#time-slider-range").css('background-color','#fff')
  }
}
function DispInstrumList(projid){
  $("#PopupDetails .modal-content").html("Loading...");
  $('#PopupDetails .modal-lg').css('width',$(window).width()/2);
  $('#PopupDetails').modal({});
  var url="/search/instrumlist"
  if(typeof (projid)!="undefined")
    url+="?projid="+projid
  $("#PopupDetails .modal-content").load(url);
}

$(document).ready(function() {
  $("#sampleid").select2({
    ajax: {
      url: "/search/samples",
      dataType: 'json',
      delay: 250,
      data: function (params) {  return { q: params.term  ,projid:$('#projid').val() };  },
      processResults: function (data, page) { return { results: data};  },
      cache: true
    },
    dropdownCssClass:"width400"
    ,placeholder: "样品"
  }); // Select2 Ajax
  $('#month').select2({placeholder: "月份"});
  $('#daytime').select2({placeholder: "日间"});
  $( "#filt_fromdate,#filt_todate" ).datepicker({
    showButtonPanel: true,changeMonth: true,changeYear: true,dateFormat:"yy-mm-dd",
  });

  $( "#time-slider-range" ).slider({
    range: true,
    min: 0,
    max: 1439,
    values: [ 0, 1439 ],
    slide: function( event, ui ) {
      v=ui.values[ 0 ];
      v=Math.floor(v/60)+":"+(("00"+(v% 60)).substr(-2));
      $( "#filt_fromtime" ).val(  v);
      v=ui.values[1];
      v=Math.floor(v/60)+":"+(("00"+(v% 60)).substr(-2));
      $( "#filt_totime" ).val( v );
    }
  });
  $("#filt_inverttime").change(function(){
    UpdateTimeSliderColor();
  });
  UpdateTimeSliderColor();
});
</script>